import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, Modal, Spin,} from 'antd';

const {TextArea} = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

const formItemLayoutText = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

const namespace = 'componentManage';

function ComponentAttrAdd(props) {
  const { getFieldDecorator } = props.form;
  const [spinning, setSpinning] = useState(false);

  useEffect(() => {
    initData();
  },[props.componentAttrAddType]);

  const initData = () => {
    if (props.selectComponentAttr !== undefined && !isEmptyObject(props.selectComponentAttr)) {
      props.form.setFieldsValue({
        attrName: props.selectComponentAttr.attrName,
        attrNbr: props.selectComponentAttr.attrNbr,
        attrId: props.selectComponentAttr.attrId,
        attrValue: props.selectComponentAttr.attrValue,
        remark: props.selectComponentAttr.remark,
        compAttrId: props.selectComponentAttr.compAttrId,
        componentId: props.selectComponentAttr.componentId,
      });
    }
  }

  // dva 保存编辑组件属性弹窗展示/隐藏标识
  const saveComponentAttrAddVisibleFlag = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveComponentAttrAddVisibleFlag`,
      payload: params,
    });
  };

  // dva 保存组件属性列表数据
  const saveComponentAttrAddList = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveComponentAttrAddList`,
      payload: params,
    });
  };

  // dva 保存组件属性新增类型
  const saveComponentAttrAddType = params => {
    const {dispatch} = props;
    dispatch({
      type: `${namespace}/saveComponentAttrAddType`,
      payload: params,
    });
  };

  const handleOk = () => {
    props.form.validateFields((err, formData) => {
      if (err) return;
      props.componentAttrAddList.map((item, index, array) => {
        if (item.attrId === formData.attrId) {
          const tempValue = Object.assign(item, formData);
          array[index] = tempValue;
        }
        return null;
      });
      const tempComponentAttrList = [...props.componentAttrAddList];
      saveComponentAttrAddList(tempComponentAttrList);
      saveComponentAttrAddVisibleFlag(false);
      saveComponentAttrAddType('');
    });
  };

  const handleCancel = () => {
    saveComponentAttrAddVisibleFlag(false);
    saveComponentAttrAddType('');
  };

  return (
    <Modal
      title='编辑组件属性'
      visible={props.modalVisible}
      width="60%"
      destroyOnClose
      onCancel={() => {
        handleCancel();
      }}
      onOk={() => {
        handleOk();
      }}
    >
      <Spin spinning={spinning}>
        <Form>
          <Row>
            <Col span={12}>
              <Form.Item label="属性名称" {...formItemLayout}>
                {getFieldDecorator('attrName')(
                  <Input
                    disabled
                    maxLength={20}
                  />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="属性编码" {...formItemLayout}>
                {getFieldDecorator('attrNbr')(
                  <Input
                    disabled
                    maxLength={20}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="属性值" {...formItemLayoutText}>
                {getFieldDecorator('attrValue')(
                  <Input
                    maxLength={250}
                    placeholder="请输入属性值"
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="备注" {...formItemLayoutText}>
                {getFieldDecorator('remark')(
                  <TextArea
                    rows={5}
                    placeholder="请输入备注"
                    maxLength={500}
                  />
                )}
              </Form.Item>
            </Col>
          </Row>
          <Row style={{display: 'none'}}>
            <Col span={1}>
              <Form.Item label="组件属性Id" {...formItemLayout}>
                {getFieldDecorator('compAttrId')(
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item label="组件Id" {...formItemLayout}>
                {getFieldDecorator('componentId')(
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item label="属性规格Id" {...formItemLayout}>
                {getFieldDecorator('attrId')(
                  <Input disabled />
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Spin>
    </Modal>
  );
}

export default connect(({ componentManage }) => ({
  selectComponentAttr: componentManage.selectComponentAttr,
  componentAttrAddList: componentManage.componentAttrAddList,
  componentAttrAddType: componentManage.componentAttrAddType
}))(Form.create()(ComponentAttrAdd));
